<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 15px; font-size: 12px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card style="box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;">
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%; font-size: 12px">
                <el-table-column
                        fixed
                        prop="id"
                        label="员工编号"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="age"
                        label="年龄"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="sex"
                        label="性别"
                        :formatter="formatter"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址"
                        width="120">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="180">
                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini"></el-button>
                        <el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" size="mini"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    background
                    layout="prev, pager, next"
                    page-size="2"
                    :total="total"
                    @current-change="page">
            </el-pagination>
        </el-card>


        <!--<el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="员工编号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别"
                    :formatter="formatter"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    width="120">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                layout="prev, pager, next"
                page-size="2"
                :total="total"
                @current-change="page">
        </el-pagination>-->

    </div>
</template>

<script>
    export default {
        methods: {
            del(row) {
                const _this = this
                axios.delete("http://localhost:8181/employees/del/" + row.id).then(function (resp) {
                    _this.$alert('删除成功！', '消息', {
                        confirmButtonText: '确定',
                        callback: action => {
                            window.location.reload()
                        }
                    });
                })
            },
            edit(row) {
                this.$router.push({
                    path: '/EditEmployees',
                    query: {
                        id: row.id
                    }
                })
            },
            page(currentPage) {
                const _this = this
                axios.get('http://localhost:8181/employees/findAll/' + currentPage + '/2').then(function (resp) {
                    _this.tableData = resp.data.content
                    _this.total = resp.data.totalElements
                })
            },
            formatter(row, column) {
                return row.sex === '0' ? "男" : row.sex === '1' ? "女" : "aaa";
            },
        },
        created() {
            const _this = this
            axios.get('http://localhost:8181/employees/findAll/1/2').then(function (resp) {
                _this.tableData = resp.data.content
                _this.total = resp.data.totalElements
            })
        },
        data() {
            return {
                tableData: null,
                total: null
            }
        }
    }
</script>